<script setup lang="ts">
const props = defineProps(['title'])


</script>

<template>
  <div style="font-size: 24px; position: relative; padding-bottom: 5px">
    <!-- 图片容器 -->
    <div class="img_div">
      <img
          style="width: 100%; height: 100%; display: block"
          src="/public/images/chart-head-bgc.png"
      >
    </div>

    <!-- 文字容器 -->
    <div class="title">
      {{ props.title }}
    </div>
  </div>


</template>

<style scoped>

.title {
  position: relative; /* 开启定位 */
  z-index: 2; /* 层级高于图片 */
  margin-left: 18px;
}

.img_div {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 20px;
  z-index: 1; /* 层级低于文字 */
}

</style>